<template>
  <div class="container">
    <Breadcrumb :items="['menu.cmdb.secret', 'menu.cmdb.secret.detail']" />
    <br />
    <div style="margin: 10px">
      <a-row class="grid-demo" :gutter="[24, 12]">
        <a-col :span="6">
          <div>描述: {{ data?.data.description }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.data.api_key }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.data.api_secret }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.data.vendor }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.id }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.data.crendential_type }}</div>
        </a-col>
        <a-col :span="6">
          <div>{{ data?.create_at }}</div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { DESCRIBE_SECRET, Secret } from '@/api/cmdb/secret';
  import { Message } from '@arco-design/web-vue';
  import { ref } from 'vue-demi';
  import { useRoute } from 'vue-router';

  const data = ref<Secret>();
  const route = useRoute();
  const fetchData = async () => {
    try {
      data.value = await DESCRIBE_SECRET(route.query.id as string);
    } catch (error) {
      Message.error(error as string);
    }
  };

  fetchData();
</script>

<style scoped></style>
